<template>
  <div class="wrapper">
    <div class="header">
      <!-- <img :src="info.logo" class="image"> -->
      <div class="header-item">
        <div class="header-item-title">可提现金额：</div>
        <div class="balance-info">
          <div class="balance">可提现金额（元）：<span>{{ mayPrice }}</span></div>
          <div class="calc">提现中（元）：<span>{{ info.withdraw }}</span></div>
        </div>
        <el-row class="button-container">
          <el-button type="primary" @click="handleWithdrawDialog">提现</el-button>
        </el-row>
      </div>
      <div class="header-item">
        <div class="header-item-title">收款账户：</div>
        <div class="balance-info">
          <div class="balance">开户行：<span>{{ info.bank_name ? info.bank_name : '' }}</span></div>
          <div class="balance">开户名：<span>{{ info.account_name ? info.account_name : '' }}</span></div>
          <div class="calc">卡号：<span>{{ info.bank_number ? info.bank_number : '' }}</span></div>
        </div>
      </div>
    </div>
    <div class="sell-info">
      <div style="margin-left:20px" class="sell-title">销售概况（销售小计：已付款订单，不包括退款成功订单。退款小计：退款成功订单）</div>
      <div class="sell-container">
        <div class="sell-price">
          <div class="sell-price-title">今日销售额小计（元）</div>
          <div class="sell-content">{{ info.todaySales }}</div>
        </div>
        <div class="sell-price">
          <div class="sell-price-title">今日退款额小计（元）</div>
          <div class="sell-content">{{ info.todayRefund }}</div>
        </div>
        <div class="sell-price">
          <div class="sell-price-title">昨日销售额小计（元）</div>
          <div class="sell-content">{{ info.ysales }}</div>
        </div>
        <div class="sell-price">
          <div class="sell-price-title">昨日退款额小计（元）</div>
          <div class="sell-content">{{ info.yrefund }}</div>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="withdrawDialog"
      title="提现"
      width="30%"
      center
      class="addEdint"
    >
      <el-row>
        <el-form ref="loginForm" :model="bank" :rules="withdrawRules">
          <el-form-item label-width="150px" label="请输入提现金额：" prop="price">
            <el-input v-model="bank.price" name="price" type="text" auto-complete="off" placeholder="" class="price-input" />
          </el-form-item>
          <el-form-item label-width="150px" label="请输入提现密码：" prop="password">
            <el-input v-model="bank.password" name="password" type="text" auto-complete="off" placeholder="" class="price-input" />
          </el-form-item>
          <el-form-item label-width="150px" label="可提现金额：">
            <div class="may">{{ mayPrice }}</div>
          </el-form-item>
          <el-form-item label-width="150px" label="开户行：">
            <div>{{ info.bank_name ? info.bank_name : '' }}</div>
          </el-form-item>
          <el-form-item label-width="150px" label="卡号：">
            <div>{{ info.bank_number ? info.bank_number : '' }}</div>
          </el-form-item>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="withdrawDialog = false">取 消</el-button>
        <el-button type="primary" @click="handAddContent">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { balance, withdraw, getInfo } from '@/api/withdraw'
export default {
  name: '',
  data() {
    const validatePrice = (rule, value, callback) => {
      if (typeof Number(value) !== 'number' || isNaN(Number(value))) {
        callback(new Error('请输入正确的提现金额'))
      } else if (value.trim() === '') {
        callback(new Error('提现金额不能为空'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.trim() === '') {
        callback(new Error('提现密码不能为空'))
      } else {
        callback()
      }
    }
    return {
      list: [],
      withdrawDialog: false,
      bank: {
        price: '',
        password: ''
      },
      mayPrice: 0,
      withdrawRules: {
        price: [{ required: true, trigger: 'blur', validator: validatePrice }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      info: {}
    }
  },
  computed: {
    tableData() {
      return this.list
    }
  },
  created() {
    this.getBalance()
    this.getData()
  },
  methods: {
    handleWithdrawDialog() {
      this.withdrawDialog = true
    },
    handAddContent() {
      const { price } = this.bank
      const { mayPrice } = this
      this.$refs.loginForm.validate(valid => {
        console.log(valid)
        if (valid) {
          if (parseInt(price) > parseInt(mayPrice)) {
            this.$message.warning({
              message: '提现金额不能大于可提现余额',
              duration: 1000
            })
          } else {
            this.getWithdraw()
          }
        }
      })
    },
    // 余额
    async getBalance() {
      const data = await balance()
      const mayPrice = data.data.balance
      this.mayPrice = mayPrice
    },
    // 提现
    async getWithdraw() {
      const amount = this.bank.price
      const pay_password = this.bank.password
      const _this = this
      try {
        await withdraw({ amount, pay_password })
        this.$message.success({
          message: '提交成功',
          duration: 1000,
          onClose() {
            _this.getBalance()
          }
        })
      } catch (err) {
        console.log(err)
        this.$message.error({
          message: err.msg,
          duration: 1000
        })
      }
      this.withdrawDialog = false
    },
    // 获取信息
    async getData() {
      const res = await getInfo()
      const { data } = res
      this.info = data
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  // padding: 20px;
  box-sizing: border-box;
  .header{
    width: 100%;
    display: flex;
    align-items: center;
    // justify-content: center;
    padding: 10px 20px;
    box-sizing: border-box;
    // background-color: #C0C4CC;
    // margin-bottom: 20px;
    justify-content: space-between;
    .header-item {
      width: 48%;
      height: 80px;
      // border: 1px solid #e6e6e6;
      box-shadow: 0 0 4px rgba(0,0,0,0.3);
      position: relative;
      .header-item-title{
        width: 200px;
        margin-top: 10px;
        margin-left: 20px;
      }
    }
    .balance-info{
      width: auto;
      display: flex;
      padding-left: 20px;
      box-sizing: border-box;
      .balance{
        margin-right: 50px;
        span{
          color: #409EFF
        }
      }
      .calc{
        span{
          color: #409EFF
        }
      }
    }
    .image{
      width: 138px;
      height: 114px;
      background-color: #000;
      margin-right: 40px;
    }
    .balance-info{
      line-height: 50px;
      font-size: 14px;
      color: #757575;
    }
    .button-container {
      position: absolute;
      top: 50%;
      right: 100px;
      transform: translateY(-50%);
      width: 200px;
      button{
        width: 80%;
      }
    }
  }
  .sell-info{
    width: 100%;
    margin-bottom: 20px;
    .sell-title{
      line-height: 50px;
      font-size: 14px;
      color: #050505;
    }
    .sell-container{
      width: 100%;
      display: flex;
      padding:0 40px;
      box-sizing: border-box;
      justify-content: space-between;
      .sell-price{
        width: 300px;
        height: 200px;
        margin: 20px;
        background-color: #67C23A;
        text-align: center;
        font-size: 14px;
        color:#fff;
        line-height: 50px;
        .sell-price-title{
          background: #89D264;
        }
        &:nth-of-type(2) {
          background-color: #409EFF;
          .sell-price-title{
            background: #79BBFF;
          }
        }
        &:nth-of-type(3) {
          background-color: #E6A23C;
          .sell-price-title{
            background: #EEB35A;
          }
        }
        &:nth-of-type(4) {
          background-color: #F56C6C;
          .sell-price-title{
            background: #F28585;
          }
        }
      }
      .sell-content{
        color:#fff;
        font-size: 30px;
        line-height: 100px
      }
    }
  }
  .income-info{
    width: 100%;
    .income-title{
      font-size: 16px;
      color: #050505;
      margin-bottom: 20px;
    }
  }
  .price-input{
    width: 200px;
  }
}
</style>
